<template>
  <div class="home">
    <!-- 这是一种获取数据的方法 -->
    <!-- {{$store.state.user.name}} -->
    <!-- {{$store.getters.getName}} -->
    {{user.name}}
    <!-- {{$store.getters.changeTime}} -->
    <!-- {{changeTime}} -->
  {{$store.getters.changeOrder}}

  {{moduleA.tel}}
    <!-- <button>修改时间</button> -->
    <!-- <button @click="getData">获取异步数据</button> -->
    <button @click="changeState">获取异步数据</button>
    <button @click="changeTel(119)">修改电话号码</button>
  </div>
</template>

<script>
// 在页面中获取store数据的方法
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
export default {
  name: 'Home',
  data() {
    return {
      name: '李狗蛋'
    }
  },
  computed: {
    ...mapState([
      'user',
      'products',
      'moduleA'
    ]),

    ...mapGetters([
      'changeTime'
    ])
  },
  created() {
    console.log(this);
  },

  methods: {
    // formate() {
    //   // 这种调用函数并携带参数的方式叫做 载荷
    //   // this.$store.commit('formate', new Date(), 1, 2)
    // }
    ...mapMutations([
      'formate',
      'changeTel'
    ]),
  ...mapActions([
    'changeState'
  ])
    // getData() {
    //   // dispatch 触发 vuex中action的方法
    //   // console.log(this);
    //   // this.$store.dispatch('getData').then(res => {
    //   //   console.log(res);
    //   // })
    //   this.$store.dispatch('changeState')
    // }
  }
}
</script>
